<template>
	<div>
		<div v-for="carItem in carsList" style="position: relative;" :class="{'car-item-on':deleteState.indexOf(carItem.carId)!=-1}">
			<div class="item-dieltedir" @click="deleteStateChange(carItem.carId)">
				<span>删除</span>
			</div>
			<item class="cars-item clearfix"  style="margin: 0;" v-deletedir="{carStockState:carStockState, favorite: favorite , carSaleState: carItem.carSaleState}" >
				<router-link :to="'/car/'+carItem.carId" v-if="status">
					<div class="cars-img">
						<span v-if="carItem.carAuthState==10">
							<img src="static/images/png/mark.png" alt="" />
						</span>
						<img :src="imgUrl + carItem.carImageUrl + '.r_400xh_300'" onerror="javascript:this.src='static/images/default.png';">
						
						<div class="car-state" v-if="carItem.carBargainPriceState"><em style="background: #FF6816;">特卖</em></div>
						<div class="car-state" v-if="carItem.carOrderState==1"><em>已预定</em></div>
					</div>
          <span class="carss1" v-if="carItem.carStockState == 1" @click.prevent="reject(carItem)">审核<br />驳回</span>
					<div class="cars-info">
						<h2 class="cars-title">{{carItem.carTitle}}</h2>
						<p class="cars-mile">{{carItem.carMileage}}万公里/
              <span v-if="carItem.carLicenceState == 1">{{carItem.carLicenceDate | filterDateForYear}}</span>
              <span v-else >{{carItem.carLicenceState | filterCarLicenceStatus}}</span>
            </p>
						<p class="cars-status" >
              <span>{{carItem.carStockState | filterCarStockState}}</span>
              <span>{{carItem.carDetectState | filterCarDetectState}} </span>
            </p>
					<span class="cars-price" v-if="carItem.carRetailPrice" style="text-align:right">
              <!-- <span class="carkd" v-if="carItem.carSaleState == 20 && carItem.loanBrandId">可带金额 ≈ {{~~carItem.valuationDealerLowBuyPrice * 0.7}}万</span> -->
							<span v-if="carItem.carRetailPrice <= 0">
								面议
							</span>
							<span v-else="carItem.carRetailPrice <= 0">
								{{carItem.carRetailPrice}}<span>万</span>
							</span>
          </span>
          <span class="cars-price" v-else="carItem.carRetailPrice" style="text-align:right">
            <!-- <span class="carkd" v-if="carItem.carSaleState == 20 && carItem.loanBrandId">可带金额 ≈ {{~~carItem.valuationDealerLowBuyPrice * 0.7}}万</span> -->
            面议</span>
					</div>
				</router-link>
				<router-link :to="'/cars/'+carItem.carId" v-else  >
					<div class="cars-img">
						<span v-if="carItem.carAuthState==10">
							<img src="static/images/png/mark.png" alt="" />
						</span>
						<img :src="imgUrl + carItem.carImageUrl + '.r_400xh_300'" onerror="javascript:this.src='static/images/default.png';">
						<div class="car-state" v-if="carItem.carBargainPriceState"><em style="background: #FF6816;">特卖</em></div>
						<div class="car-state" v-if="carItem.carOrderState==1"><em>已预定</em></div>
					</div>
					<div class="cars-info">
						<h2 class="cars-title">{{carItem.carTitle}}</h2>
						<p class="cars-mile">{{carItem.carMileage}}万公里/
              <span v-if="carItem.carLicenceState == 1">{{carItem.carLicenceDate | filterDateForYear}}</span>
              <span v-else >{{carItem.carLicenceState | filterCarLicenceStatus}}</span>
            </p>
						<p class="cars-mile" style="width:73%" v-if="carItem.market">{{carItem.market.city.cityName}}/{{carItem.shop.shopName}}</p>					
					<span class="cars-price" v-if="carItem.carRetailPrice" style="text-align: right;">
							<span v-if="carItem.carRetailPrice <= 0">
								面议
							</span>
							<span v-else="carItem.carRetailPrice <= 0">
								{{carItem.carRetailPrice}}<span>万</span>
							</span>
							<span style="display: block; font-size: 12px; color: #000;" >{{carItem.carSaleTime | filterDatefavorite}}</span>
						</span>
						<span class="cars-price" v-else="carItem.carRetailPrice">面议</span>
					</div>
				</router-link>
				<div class="carsale" v-if="carItem.carSaleState==30&&favorite" style="background:url(static/images/png/sale.png) no-repeat right center / auto 60%;"></div>
				
			</item>
		</div>
	</div>
</template>

<script>
class vDeleteDir {
  constructor(el) {
    this.el = el;
    this.moveTrue = false;
    this.start = {};
    this.start.x = 0;
    this.move = {};
    this.move.x = 0;
    this.end = {};
    this.end.x = 0;
    this.toline = 120;
    this.el.addEvent = this.el.addEventListener
      ? this.el.addEventListener
      : this.el.attachEvent;
    this.init();
  }
  init() {
    this.touch();
  }
  animated() {
    this.el.classList.add("animateds");
    setTimeout(() => {
      this.el.classList.remove("animateds");
    }, 400);
  }
  touch() {
    this.el.addEvent("touchstart", event => {
      let e = event.targetTouches[0];
      this.move.x = this.start.x = e.pageX;
      this.moveTrue = true;
    });
    this.el.addEvent("touchmove", event => {
      if (this.moveTrue) {
        let e = event.targetTouches[0];
        this.move.x = e.pageX;
        let tox = this.move.x - this.start.x;
        if (tox > 50) {
          this.el.style.transform =
            "translateX(" +
            parseInt(this.move.x - this.start.x - 50 + this.end.x) +
            "px)";
        } else if (tox < -50) {
          this.el.style.transform =
            "translateX(" +
            parseInt(this.move.x - this.start.x + 50 + this.end.x) +
            "px)";
        }
      }
    });
    this.el.addEvent("touchend", event => {
      this.moveTrue = false;
      this.animated();
      this.end.x =
        this.move.x - this.start.x < -this.toline / 2 ? -this.toline : 0;
      if (Math.abs(this.move.x - this.start.x) > 50){
        this.el.style.transform = "translateX(" + parseInt(this.end.x) + "px)";
      }
    });
  }
}
export default {
  data() {
    return {
      imgUrl: imgUrl,
      deleteState: "",
      contents: '初始化',
      paths: "'/car/'+carItem.carId"
    };
  },
  created() {
    this.carsList.map(item => (item.deleteState = true));
  },
  methods: {
    // reject (item, e) {
    //   console.log(e.target.innerText, )
    //   if (e.target.innerText == '审核驳回') 
    //   this.$router.push({
    //       // path: `/dismissal/${item.carId}`
    //   }) 
    //   return false;

    // },
    reject (item, e) {
        this.$router.forward(`/dismissal/${item.carId}`)
     
      // if (item.carStockState == 1) {
      //   this.$router.push({
      //     path: `/dismissal/${val}`
      //   })
      // } else {
      //   this.$router.push({
      //     path: `/car/${val}`
      //   })
      // }
    },
    deleteStateChange(carId) {
      $dialog
        .confirm({
          // 标题
          title: "提示",
          content: "确认删除该车辆",
          // 取消按钮文本
          cancelText: "取消",
          // 确定按钮文本
          okText: "确认"
        })
        .then(res => {
          if (res) {
            console.log(this.favorite)
            if ( !this.favorite ) {
              window.axios
                .get(baseUrl + "/controller/car/deleteCar", {
                  params: { carId: carId, userId: sess.get('userSession').userId}
                })
                .then(res => {
                  if (res) {
                    this.deleteState += carId + ",";
                    setTimeout(() => {
                      $toast.show("删除成功", 2000);
                    }, 400);
                  }
                });
            } else {
              window.axios
                .get(baseUrl + "/controller/carFavorite/deleteCarFavorite", {
                  params: { carId: carId, userId: sess.get('userSession').userId}
                })
                .then(res => {
                  if (res) {
                    this.deleteState += carId + ",";
                    setTimeout(() => {
                      $toast.show("删除成功", 2000);
                    }, 400);
                  }
                });
            }
          }
        });
    }
  },
  props: ["carsList", "status", "favorite", "carStockState"],
  directives: {
    deletedir: {
      bind: function(el, val) {
        console.log(val)
        
        if (val.value.carStockState === "0" || (val.value.favorite === true && ~~val.value.carSaleState == 30 )) {
          new vDeleteDir(el);
        } else {
          return false;
        }
        
      }
    }
  }
};
</script>